<template>
    <el-dialog :title="title" :visible.sync="dialogForm" width="1100px">
        <div>
            <!-- <base-list ref="myRecords" :condition="condition" :isShowClose="true"
                       :pageSearch="pageSearch"  :isPaging="false"> -->
            <el-form :inline="true" :model="condition" class="search-form" label-width="80px">
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="车皮号" prop="condition.search_LIKE_wagonNo">
                            <el-input type="text" v-model.trim="condition.search_LIKE_wagonNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="货名">
                            <el-input v-model="condition.search_LIKE_cargoName" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="到站">
                            <el-input v-model="condition.search_LIKE_endStationName" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="货主">
                            <el-input v-model="condition.search_LIKE_entrustOrgName" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="时间">
                            <!-- <date-slot :startDate.sync="condition.search_GTE_date" dateType="yyyy-MM-dd HH:mm:ss" :endDate.sync="condition.search_LTE_date"></date-slot> -->
                            <el-date-picker v-model="condition.search_GTE_date" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="日期"></el-date-picker>至
                            <el-date-picker v-model="condition.search_LTE_date" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="日期"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" style="margin-left:-50px">
                        <el-button type="primary" icon="el-icon-search" @click="handleSearch" class="ml-80">查 询
                        </el-button>
                        <el-button @click="handleExport">明细导出</el-button>
                        <el-button v-if="title!=='接车车皮记录'" @click="handlePrint('sendCarPrint')">打印</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-row type="flex" justify="end">
                <el-col :span="20" style="display: flex;justify-content: space-between">
                    <title-point color="#50B155">
                        <div slot="content">
                            总车皮数 :
                            <span style="font-size: 16px">{{ form.total }}</span>
                        </div>
                    </title-point>
                    <title-point color="#449DFF">
                        <div slot="content">
                            重车皮 :
                            <span style="font-size: 16px">{{ form.heavy }}</span>
                        </div>
                    </title-point>
                    <title-point color="#30C8CA">
                        <div slot="content">
                            空车皮 :
                            <span style="font-size: 16px">{{ form.empty }}</span>
                        </div>
                    </title-point>
                    <title-point color="#FFCC00">
                        <div slot="content">
                            总标箱量 :
                            <span style="font-size: 16px">{{ form.teu }} </span>
                        </div>
                    </title-point>
                    <title-point color="#B798F5">
                        <div slot="content">
                            20尺箱 :
                            <span style="font-size: 16px">{{ form.size2 }} </span>
                        </div>
                    </title-point>
                    <title-point color="#B798F5">
                        <div slot="content">
                            40尺箱 :
                            <span style="font-size: 16px">{{ form.size4 }} </span>
                        </div>
                    </title-point>
                </el-col>
            </el-row>
            <el-table :data="recordList2" border stripe max-height="500" class="mt-20" :span-method="objectSpanMethod">
                <!-- <el-table-column prop="id" type="selection" width="55"></el-table-column> -->
                <!-- <el-table-column prop="xuhao" label="序号" type="index" width="55"></el-table-column> -->
                <el-table-column v-if="title==='接车车皮记录'" prop="wagonSortNo" label="进港顺序" min-width="100"></el-table-column>
                <el-table-column prop="wagonNo" label="车皮号" min-width="120"></el-table-column>
                <el-table-column prop="containerNo" label="箱号" min-width="150"></el-table-column>
                <el-table-column prop="containerType" label="箱型" min-width="80"></el-table-column>
                <el-table-column prop="containerSize" label="尺寸" min-width="60"></el-table-column>
                <el-table-column prop="ifHeavy" label="空重" min-width="60">
                    <template slot-scope="scope">
                        {{ scope.row.ifHeavy | _filterIfHeavyType }}
                    </template>
                </el-table-column>
                <el-table-column prop="cargoName" label="货名" min-width="100"></el-table-column>
                <el-table-column prop="cargoWeight" label="货重" min-width="100"></el-table-column>
                <el-table-column prop="commander" label="指挥手" min-width="100"></el-table-column>
                <el-table-column prop="driverName" label="作业司机" min-width="100"></el-table-column>
                <el-table-column prop="machineName" label="作业机械" min-width="100"></el-table-column>
                <el-table-column prop="jobTime" label="装车时间" min-width="160"></el-table-column>
                <el-table-column prop="entrustOrgName" label="货主" min-width="130"></el-table-column>
                <el-table-column prop="stratStationName" label="发站" min-width="100"></el-table-column>
                <el-table-column prop="endStationName" label="到站" min-width="100"></el-table-column>
                <!-- <el-table-column prop="portStatus" label="在港状态" min-width="80">
                    <template slot-scope="scope">
                        {{ scope.row.portStatus ? '在港' : '不在港' }}
                    </template>
                </el-table-column> -->
                <el-table-column prop="meetCarDate" label="接车时间" min-width="160"></el-table-column>
                <el-table-column prop="sendCarDate" label="发车时间" min-width="160"></el-table-column>
                <el-table-column prop="stopDate" label="停留时间(h)" min-width="100"></el-table-column>
            </el-table>
            <!-- </base-list> -->
            <!-- <el-pagination class="page" @size-change="size=>pageInfo.iDisplayLength=size" layout="total, sizes, prev, pager, next, jumper" :current-page.sync="pageInfo.pageStart" :page-sizes="pageInfo.pageArr" :page-size="pageInfo.iDisplayLength" :total="total"  style="float:right" :isPaging="false">
            </el-pagination> -->
        </div>
        <span slot="footer" class="dialog-footer">
            <!-- <el-button type="primary" @click="handleSaveContract(true)">确定</el-button> -->
            <el-button @click="dialogForm = false">取 消</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { records, trainJobPlanRecordsCount } from "@/api/gatePanel/gatePanel";
import searchCustom from "@/components/autocomplete/autoSearchCustom";
import dateSlot from "@/components/date/dateSlot";
import { newExportExcel } from "@/utils/newExport";
import { ifHeavyType, portStatusType } from "@/assets/dict";
import titlePoint from "../common/title-point";
import { Message } from 'element-ui';

// 获取当前月份的最后一天的日期
function getCurrentMonthLast() {
    var date = new Date();
    var currentMonth = date.getMonth();
    var nextMonth = ++currentMonth;
    var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
    var oneDay = 1000 * 60 * 60 * 24;
    return new Date(nextMonthFirstDay - oneDay)
        .toLocaleDateString()
        .split("/")[2];
}

export default {
    components: { searchCustom, dateSlot, titlePoint }, //组件
    data() {
        return {
            condition: {
                search_GTE_date: "",
                search_LTE_date: "",
                search_EQ_recordType: ""
            }, // 查询条件
            recordList: [], // table数组
            recordList2: [], // table数组
            pageSearch: records, // 分页查询api接口
            title: "发车车皮记录",
            dialogForm: false,
            type: "",
            pageInfo: this.$defalutPage(),
            total: 0,
            form: {}
        };
    },
    mounted() {},
    methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (
                column.property == "id" ||
                column.property == "wagonSortNo" ||
                column.property == "wagonNo" ||
                column.property == "endStationName" ||
                column.property == "stratStationName" ||
                column.property == "portStatus" ||
                column.property == "meetCarDate" ||
                column.property == "sendCarDate" ||
                column.property == "stopDate"
            ) {
                if (row.merge) {
                    //合并当前行
                    return {
                        rowspan: 2,
                        colspan: 1
                    };
                } else if (row.merged) {
                    //标记当前为已合并
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        },

        loadData(date1, date2, type, method) {
            // console.log(this.$refs.myRecords)

            setTimeout(() => {
                // this.condition.search_EQ_recordType = type;
                this.$set(this.condition, 'search_EQ_recordType', type)
                // this.condition.search_GTE_date = date1;
                this.$set(this.condition, 'search_GTE_date', date1)
                // this.condition.search_LTE_date = date2;
                this.$set(this.condition, 'search_LTE_date', date2)
                if (method === "month") {
                    let month = new Date(
                        date1.split("-")[0] + "/" + date1.split("-")[1] + "/0"
                    );
                    // this.condition.search_GTE_date =
                    //     date1.split("-")[0] + "-" + date1.split("-")[1] + "-01";
                    this.$set(this.condition, 'search_GTE_date', date1.split("-")[0] + "-" + date1.split("-")[1] + "-01")
                    // this.condition.search_LTE_date =
                    //     date1.split("-")[0] +
                    //     "-" +
                    //     date1.split("-")[1] +
                    //     "-" +
                    //     getCurrentMonthLast();
                this.$set(this.condition, 'search_LTE_date', 
                        date1.split("-")[0] +
                        "-" +
                        date1.split("-")[1] +
                        "-" +
                        getCurrentMonthLast() + ' 23:59:59')
                }
                if (this.condition["search_GTE_date"].length < 11) {
                    // this.condition["search_GTE_date"] =
                    //     this.condition["search_GTE_date"] + " 00:00:00";
                }
                if (this.condition["search_LTE_date"].length < 11) {
                    // this.condition["search_LTE_date"] =
                    //     this.condition["search_LTE_date"] + " 23:59:59";
                }

                if (
                    new Date(this.condition["search_LTE_date"]).getTime() -
                        new Date(this.condition["search_GTE_date"]).getTime() <=
                    5 * 24 * 3600 * 1000
                ) {
                } else {
                    this.$message({ message: '查询日期间隔不能超过五天!', type: 'error' })
                    return false
                        
                }

                if (type == "send") {
                    this.title = "发车车皮记录";
                } else {
                    this.title = "接车车皮记录";
                }
                this.condition.iDisplayStart = this.pageInfo.pageStart - 1;
                this.condition.iDisplayLength = this.pageInfo.iDisplayLength;
                records(this.condition).then(res => {
                    this.total = res.data.iTotalRecords;
                    let _tmp = res.data.aaData;
                    for (let i = 0; i < _tmp.length; i++) {
                        //默认只有2条会重复
                        if (i % 2 == 1) {
                            //查询前一条数据
                            if (_tmp[i - 1].planNo == _tmp[i].planNo) {
                                //标记前一条数据为合并
                                _tmp[i - 1].merge = true;
                                //标记当前数据为已合并数据
                                _tmp[i].merged = true;
                            }
                            //查询后一条数据
                            if (_tmp[i + 1]) {
                                if (_tmp[i + 1].planNo == _tmp[i].planNo) {
                                    //标记当前数据为合并
                                    _tmp[i].merge = true;
                                    //标记后一条数据为已合并数据
                                    _tmp[i + 1].merged = true;
                                }
                            }
                        }
                        //- 2018-5-27 18：23 更改
                        //- 追加options参数,判断最后是否有操作按钮
                        _tmp[i].options = "";
                    }
                    this.recordList = _tmp;
                    this.recordList2 = _tmp;
                    console.log(_tmp, 111);
                });
                trainJobPlanRecordsCount(this.condition).then(res => {
                    console.log(res);
                    this.form = res.data;
                });
            }, 100);
        },

        handleSearch() {  //查询
            this.loadData(
                this.condition.search_GTE_date,
                this.condition.search_LTE_date,
                this.condition.search_EQ_recordType,
                ""
            );
        },
        handlePrint(router) {
            window.localStorage.sendCarPrint = JSON.stringify(this.condition);
            const origin = window.location.origin + window.location.pathname;
            const route = `#/${router}/`;
            window.open(`${origin}${route}`);
        },
        handleExport() {
            let title = "发车车皮记录";
            let type = this.condition.search_EQ_recordType;
            let map = new Map();
            if (type === "get") {
                title = "接车车皮记录";
            }
            if (title === "接车车皮记录") {
                map.set("wagonSortNo", "进港顺序");
            }
            map.set("wagonNo", "车皮号");
            map.set("containerNo", "箱号");
            map.set("containerType", "箱型");
            map.set("containerSize", "尺寸");
            map.set("ifHeavy", "空重");
            map.set("cargoName", "货名");
            map.set("cargoWeight", "货重");
            map.set("entrustOrgName", "货主");
            map.set("stratStationName", "发站");
            map.set("endStationName", "到站");
            map.set("commander", "指挥手");
            map.set("driverName", "作业司机");
            map.set("machineName", "作业机械");
            map.set("jobTime", "装车时间");
            // map.set("portStatus", "在港状态");
            map.set("meetCarDate", "接车时间");
            map.set("sendCarDate", "发车时间");
            map.set("stopDate", "停留时间(h)");
            let exportRecords = [];
            let exportArr = JSON.parse(JSON.stringify(this.recordList2));
            exportArr.forEach(record => {
                let exportRecord = {};
                for (let [key, value] of map.entries()) {
                    if (key === "ifHeavy") {
                        record[key] = ifHeavyType.get(record[key]);
                    }
                    if (key === "portStatus") {
                        record[key] = portStatusType.get(record[key]);
                    }
                    exportRecord[value] = record[key];
                }
                exportRecords.push(exportRecord);
            });
            newExportExcel(title, exportRecords);
        }
    },
    watch: {
        dialogForm(bool) {
            if (!bool) {
                this.condition = {
                    search_GTE_date: "",
                    search_LTE_date: "",
                    search_EQ_recordType: ""
                };
            }
        },
        pageInfo: {
            deep: true,
            handler: function() {
                this.handleSearch();
            }
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/*.dialog-footer {*/

/*display: flex;*/

/*justify-content: flex-start;*/

/*}*/
</style>

